<template>
  <section class="page-container">
    <section class="form-wrap">
      <el-form
        :label-width="120"
        :model="editParams"
        class="normal"
      >
        <el-maia-card title="视频参数">
          <el-row>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="匹配模式">
                <el-select
                  v-model="editParams.matchModelVideo"
                  placeholder="请选择匹配模式"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in modelList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="采集分辨率">
                <el-select
                  v-model="editParams.collectDmp"
                  placeholder="请选择采集分辨率"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in collectDmpList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="采集帧率">
                <el-input
                  v-model="editParams.collectFps"
                  placeholder="输入范围[1, 30]"
                  clearable
                >
                  <template #append>
                    fps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码分辨率">
                <el-select
                  v-model="editParams.inputDmp"
                  placeholder="请选择编码分辨率"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in collectDmpList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码码率最小值">
                <el-input
                  v-model="editParams.inputCodeBpsMin"
                  placeholder="输入范围[150, 1800]"
                  clearable
                >
                  <template #append>
                    bps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码码率最大值">
                <el-input
                  v-model="editParams.inputCodeBpsMax"
                  placeholder="输入范围[150, 1800]"
                  clearable
                >
                  <template #append>
                    bps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码码率默认值">
                <el-input
                  v-model="editParams.inputCodeBpsDefault"
                  placeholder="输入范围[150, 1800]"
                  clearable
                >
                  <template #append>
                    bps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码帧率">
                <el-input
                  v-model="editParams.inputCodeFps"
                  placeholder="输入范围[1, 30]"
                  clearable
                >
                  <template #append>
                    fps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码profile">
                <el-input
                  v-model="editParams.inputCodeProfile"
                  placeholder="输入范围[1500, 1800]"
                  clearable
                >
                  <template #append>
                    bps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-maia-card>

        <el-maia-card
          title="音频参数"
          class="mt-12"
        >
          <el-row>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="匹配模式">
                <el-select
                  v-model="editParams.matchModelAudio"
                  placeholder="请选择匹配模式"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in modelList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="采集声道数">
                <el-select
                  v-model="editParams.collectAudioNum"
                  placeholder="请选择采集声道数"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in collectAudioNumList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码声道数">
                <el-input
                  v-model="editParams.codeAudioNum"
                  placeholder="输入范围[150, 1800]"
                  clearable
                >
                  <template #append>
                    bps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码码率">
                <el-input
                  v-model="editParams.codeBpsAudio"
                  placeholder="输入范围[150, 1800]"
                  clearable
                >
                  <template #append>
                    bps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :md="12"
              :lg="8"
            >
              <el-form-item label="编码profile">
                <el-input
                  v-model="editParams.codeProfileAudio"
                  placeholder="输入范围[1, 30]"
                  clearable
                >
                  <template #append>
                    fps
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-maia-card>

        <el-maia-card
          title="填写说明"
          class="mt-12"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="参数说明">
                <el-input
                  v-model="editParams.paramsDesc"
                  type="textarea"
                  placeholder="请填写参数说明，最多不超过200字。"
                  clearable
                  :autosize="{
                    minRows: 3,
                    maxRows: 6,
                  }"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-maia-card>
      </el-form>
    </section>

    <section class="options-wrap">
      <el-button
        v-blur
        type="primary"
        @click="onSubmit"
      >
        提交
      </el-button>
      <el-button
        v-blur
        @click="onReset"
      >
        重置
      </el-button>
    </section>
  </section>
</template>
<script lang="tsx">
import { defineComponent, reactive, toRefs } from 'vue';

import { ElMessage } from 'hive-plus';

  type State = {
    modelList: TypeObject[],
    collectDmpList: TypeObject[],
    collectAudioNumList: TypeObject[],
    editParams: TypeObject
  }
export default defineComponent({
  name: 'GroupForm',
  setup() {
    const state:State = reactive({
      modelList: [
        {
          id: 1,
          label: '自定义',
          value: 1,
        },
        {
          id: 2,
          label: '模式1',
          value: 2,
        },
        {
          id: 3,
          label: '模式2',
          value: 3,
        }
      ],
      collectDmpList: [
        {
          id: 1,
          label: '分辨率1',
          value: 1,
        },
        {
          id: 2,
          label: '分辨率2',
          value: 2,
        },
        {
          id: 3,
          label: '分辨率3',
          value: 3,
        }
      ],
      collectAudioNumList: [
        {
          id: 1,
          label: 1,
          value: 1,
        },
        {
          id: 2,
          label: 2,
          value: 2,
        },
        {
          id: 3,
          label: 3,
          value: 3,
        }
      ],

      editParams: {
        matchModelVideo: '',
        collectDmp: '',
        collectFps: '',
        inputDmp: '',
        inputCodeBpsMin: '',
        inputCodeBpsMax: '',
        inputCodeBpsDefault: '',
        inputCodeProfile: '',

        matchModelAudio: '',
        collectAudioNum: 1,
        codeAudioNum: '',
        codeBpsAudio: '',
        codeProfileAudio: '',
      },
    });

    return {
      ...toRefs(state),
      onSubmit: () => {
        ElMessage.success('提交成功');
      },
      onReset: () => {
        ElMessage.info('重置');
      },
    };
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .form-wrap {
    flex: 1;
    overflow-y: auto;
  }

  .options-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-align: center;
    background-color: var(--#{$namespace}-color-white);
    border-top: 1px solid var(--maia-color-main-grey);
  }
}
</style>
